<template>
    <div class="dashboard-container">
        <div class="container">
            <!-- 按钮添加 -->
            <div class="tableBar" style="display: inline-block;">
                <el-input
                        v-model="input"
                        placeholder="请输入发布人昵称"
                        style="width: 232px"
                        clearable
                        @keyup.enter.native="handleQuery"
                >
                    <i
                            slot="prefix"
                            class="el-input__icon el-icon-search"
                            style="cursor: pointer"
                    ></i>
                </el-input>
                <div class="tableLab"
                     style="display: inline-block;">
                    <el-date-picker v-model="orderTime"
                                    clearable
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetimerange"
                                    unlink-panels
                                    placeholder="选择日期"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    style="width: 400px;margin-left: 20px; "
                    ></el-date-picker>
                    <el-button
                            type="success"
                            icon="el-icon-search"
                            @click="handleQuery"
                    >
                        搜索
                    </el-button>
                    <el-button
                            type="warning"
                            icon="el-icon-refresh"
                            @click="crud.refresh()"
                    >
                        重置
                    </el-button>
                </div>
            </div>
        </div>
        <el-button-group class="crud-opts-right" style="display: block;">
            <el-button
                    style="margin-right: 10px;"
                    size="mini"
                    type="success"
                    icon="el-icon-ali-qiyong"
                    @click="statusHandle('1')"
            >
                批量启用
            </el-button>
            <el-button
                    style="margin-right: 10px;"
                    size="mini"
                    type="warning"
                    icon="el-icon-ali-jinyong"
                    @click="statusHandle('0')"
            >
                批量禁用
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-ali-shanchu"
                    @click="deleteHandle('批量', null)"
            >
                批量删除
            </el-button>
        </el-button-group>

        <!-- el-table展示 -->
        <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                class="tableBox"
                border fit stripe
                tooltip-effect="dark"
                :header-cell-class-name="'headerBg'"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    align="center"
                    type="selection"
                    width="40px"
                    style="border: none;"
            ></el-table-column>
            <el-table-column align="center" label="分享时间" prop="shareTime" :formatter="formatDate"
                             min-width="15%"></el-table-column>
            <el-table-column align="center" label="分享人" prop="nickname" min-width="15%"></el-table-column>
            <el-table-column align="center" label="分享内容" prop="textMessage" min-width="40%"
                             :show-overflow-tooltip='true'></el-table-column>
            <el-table-column align="center" label="点赞数" prop="likes" min-width="10%"></el-table-column>
            <el-table-column align="center" label="状态" min-width="10%">
                <template slot-scope="scope">
                    <!-- <span v-show="false">{{butStatus(scope.row.status)}}</span> -->
                    <el-switch
                            v-model="scope.row.status==true?true:false"
                            active-color="#55ff00"
                            inactive-color="#F56C6C"
                            @change="changeEnable(scope.row,scope.row.status)"
                    />
                    <!-- :disabled="user.id === scope.row.id" -->
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="10%">
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="midium"
                            class="delBut common"
                            @click="deleteHandle('单删', scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 底部分页 -->
        <el-pagination
                style="text-align: center;"
                class="pageList"
                :page-sizes="[7,9,13]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                :current-page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
    </div>
    </div>
</template>

<script>
    import {showLoading, hideLoading} from '../utils/Loading.js'
    import {queryShare, shareStatus, deleteById} from '@/api/share.js'
    // import axios from 'axios'
    export default {
        name: 'Activity',
        data() {
            return {
                bstatus:'',
                loading: true,
                tableData: [],
                orderTime: [],
                checkList: [],
                input: '',
                counts: 0,
                page: 1,
                ids: '',
                pageSize: 7,
                status: '',
            }
        },
        watch: {
            //监听text，当他有值时发送按钮才可以点击
            butStatus(newVal) {
                this.bstatus = newVal == '0' ? false:true;
                return newVal == '0' ? false:true;
            }
        },
        created() {
            this.$store.commit('setPath', '分享管理')
            this.init()
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input ? this.input : "",
                    duration: this.orderTime ? this.orderTime.join('--') : ""
                }
                await queryShare(params).then(res => {
                    this.loading = false;
                    this.tableData = res.data.shares;
                    this.counts = parseInt(res.data.total);
                    // }
                }).catch(err => {
                    this.loading = false
                    this.$message.error('请求出错了：' + err)
                })
            },            //方法区

            getImage(image) {
                return `/api/common/download?name=${image}`
            },

            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },


            handleCurrentChange(val) {
                this.page = val
                this.init()
            },

            handleQuery() {
                this.page = 1;
                this.init();
            },

            // 全部操作
            handleSelectionChange(val) {
                let checkArr = []
                val.forEach((n) => {
                    checkArr.push(n.id)
                })
                console.log(val)
                this.checkList = checkArr
            },            //方法区
            formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if (data == null) {
                    return null
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
                    + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            changeEnable(data, status) {
                console.log(data);
                const operation = status == '0' ? '恢复' : '封杀';
                this.$confirm('此操作将 "' + operation + '" ' + data.userNickname + '发布的分享, 是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.statusHandle(data)
                    }
                )
            },
            //状态更改
            statusHandle(row) {
                let params = {}
                if (typeof row === 'string') {
                    if (this.checkList.length === 0) {
                        this.$message.error('批量操作，请先勾选对象！')
                        return false
                    }
                    params.id = this.checkList.join(',')
                    params.status = row
                } else {
                    params.id = row.id
                    console.log("row.status:", row.status);
                    params.status = row.status ? '0' : '1';
                }
                this.dishState = params
                // 起售停售---批量起售停售接口
                shareStatus(this.dishState).then(res => {
                    console.log(res.data.code)
                    if (res.data.code == 1) {
                        this.$message.success('更改成功！')
                        this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },

            // 删除
            deleteHandle(type, id) {
                console.log(id)
                if (type === '批量' && id === null) {
                    if (this.checkList.length === 0) {
                        return this.$message.error('请选择删除对象')
                    }
                }
                this.$confirm('确认删除该用户, 是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    deleteById(type === '批量' ? this.checkList.join(',') : id).then(res => {
                        if (res.data == '1') {
                            this.$message.success('删除成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error('操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
        }
    }
</script>

<style>

    .dashboard-container .container .tableBox {
        width: 100%;
        border: solid 2px #f3f4f7;
        border-radius: 2px;
    }

    .el-link {
        margin-left: 15px;
    }

    .delBut {
        color: #f56c6c !important;
        position: relative;
    }

    .common::after {
        content: "";
        position: absolute;
        right: -6px;
        height: 14px;
        width: 0px;
        border-right: solid 1px #d1d3d9 !important;
    }
</style>